<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>SpringCloud Demo</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="bootstrap/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="bootstrap/css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="row">
    <div class="col-sm-3">

    </div>
    <div class="col-sm-6">
            <h2 class="no-margins" style="text-align: center">用户注册：</h2>
            <div class="row" style="padding-bottom: 10px">
                <div class="col-sm-3">
                    邮箱：
                </div>
                <div class="col-lg-5">
                    <input type="text" id="email" name="email" class="form-control uname"     placeholder="邮箱" />
                </div>
                <div class="col-sm-4" style="color: red" id="emailMsg">
                </div>
            </div>
            <div class="row" style="padding-bottom: 10px">
                <div class="col-sm-3">
                    密码：
                </div>
                <div class="col-lg-5">
                    <input type="password" id="password"  name="password" class="form-control pword"     placeholder="密码"   value="" />
                </div>
                <div class="col-sm-4" style="color: red">
                </div>
            </div>
            <div class="row" style="padding-bottom: 10px">
                <div class="col-sm-3">
                    确认密码：
                </div>
                <div class="col-lg-5">
                    <input type="password" id="confirmPassword" name="confirmPassword" class="form-control pword"     placeholder="确认密码"   value="" />
                </div>
                <div class="col-sm-4">

                </div>
            </div>
            <div class="row" style="padding-bottom: 10px">
                <div class="col-sm-3">
                    验证码：
                </div>
                <div class="col-lg-5">
                    <input type="text"  id="code"   name="code" class="form-control verification"     placeholder="验证码" value=""/>
                </div>
                <div class="col-sm-4">
                    <a id="generateCode" href="javascript:void(0)">生成验证码</a>
                    <div id="showTime" style="width: 60px;height: 20px;background-color: #a6e1ec;"><i id="showTime_left">60</i>秒</div>
                </div>
            </div>
            <div class="row" style="padding-bottom: 10px">
                <div class="col-sm-3">

                </div>
                <div class="col-sm-4">
                    <button class="btn btn-success btn-block" id="btnSubmit">注册</button>
                </div>
                <div class="col-sm-5">

                </div>
            </div>
    </div>
    <div class="col-sm-3">

    </div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#showTime").hide();
    $(document).ajaxComplete(function(e, xhr, settings){
        console.log("ajaxComplete ")
        redirectHandle(xhr);
    });

    function redirectHandle(xhr) {
        //获取后台返回的参数
        var url = xhr.getResponseHeader("redirectUrl");
        console.log("redirectUrl = " + url);
        var enable = xhr.getResponseHeader("enableRedirect");
        if((enable == "true") && (url != "")){
            var win = window;
            while(win != win.top){
                win = win.top;
            }
            win.location.href = url;
        }
    }

    $("#generateCode").click(function () {
        var valEmail = $("#email").val();
        var trimEmail = valEmail.trim();
        if (valEmail == ""){
            $("#emailMsg").html("请输入邮箱地址。");
            return;
        }
        $.ajax({
            url:"../api/code/create/"+trimEmail,
            type:"GET",
            beforeSend:function () {
                $("#generateCode").hide();
                $("#showTime").show();
                var fun = function(){
                    var number = parseInt($("#showTime_left").html());
                    $("#showTime_left").html(number == 0 ? 0: number-1);
                    setTimeout(fun, 1000);
                };
                setTimeout(fun, 1000);
            },
            success:function(result,status,xhr){
                if (result == true){
                    alert("验证码已发送到您的邮箱，请查收。")
                }else {
                    alert("验证码发送失败。");
                    $("#showTime_left").html("60");
                    $("#generateCode").show();
                    $("#showTime").hide();
                }

            },
            error:function (e) {
                var res = $.parseJSON(e.responseText);
                alert("生成验证码失败："+res.message);
            }
        });
    });

    $("#btnSubmit").click(function () {
        var email = $("#email").val().trim();
        var password = $("#password").val().trim();
        var confirmPassword = $("#confirmPassword").val().trim();
        var code = $("#code").val().trim();
        if (email == ""){
            alert("请输入email");
            return ;
        }
        if (password == ""){
            alert("请输入密码");
            return ;
        }
        if (password !== confirmPassword){
            alert("确认密码不正确");
            return ;
        }
        if (code == ""){
            alert("请输入验证码。");
            return ;
        }
        $.ajax({
            url:"../api/user/register/"+email+"/"+password+"/"+code,
            type:"GET",
            success:function(result,status,xhr){
                if (!result){
                    alert("注册失败。");
                }
            },
            statusCode: {
                303:function(s) {
                    alert(s.responseText);
                },
                500:function (s) {
                    alert(s.responseText);
                }
            }
        });
    });
})
</script>
</body>
</html>